<template>
  <a-modal
    :title='title'
    :width='drawerWidth'
    placement='right'
    :closable='true'
    @close='handleCancel'
    :confirmLoading='confirmLoading'
    @ok="handleSubmit"
    @cancel="handleCancel"
    :visible='visible'
    :body-style="{ paddingBottom: '80px' }">
    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>
    </template>

    <a-spin :spinning='confirmLoading'>
        <a-form :form='form'>
          <a-form-item   label='项目' :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select label-in-value style='width: 300px;margin-right: 20px' v-decorator="['projectName',{rules:[{required:true,message:'请选择项目！'}]}]" @change='initAreaList'>
            <a-select-option v-for='item in projectList' :label='item.name' :value='item.id' :key='item.id'>
              <span style="float: left">{{item.name}}</span>
            </a-select-option>
          </a-select>
          </a-form-item>

          <a-form-item label='区域' :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select label-in-value style='width: 300px;margin-right: 20px' v-decorator="['areaName',{rules:[{required: true,message:'请选择区域'}]}]" @change='initBuildList'>
                <a-select-option v-for='item in areaList' :label='item.name' :value='item.id' :key='item.id'>
                  <span style="float: left">{{item.name}}</span>
                </a-select-option>
              </a-select>
          </a-form-item>

          <a-form-item label='楼栋' :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select label-in-value style='width: 300px;margin-right: 20px' v-decorator="['buildName',{rules:[{required:true,message:'请选择楼栋'}]}]" @change='initUnitList'>
                <a-select-option v-for='item in buildList' :label='item.buildingName' :value='item.id' :key='item.id'>
                  <span style="float: left">{{item.buildingName}}</span>
                </a-select-option>
              </a-select>
            <a-button type='primary' @click="objectAdd(1)" icon="plus">新增</a-button>
          </a-form-item>

          <a-form-item  label='单元' :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-select label-in-value style='width: 300px;margin-right: 20px' v-decorator="['unitName',{rules:[{required:true,message:'请选择单元'}]}]" @change='initFloorList'>
              <a-select-option v-for='item in unitList' :label='item.unitName' :value='item.id' :key='item.id'>
                <span style="float: left">{{item.unitName}}</span>
              </a-select-option>
            </a-select>
            <a-button type='primary' @click="objectAdd(2)" icon="plus">新增</a-button>
          </a-form-item>

          <a-form-item label='楼层' :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-select label-in-value style='width: 300px;margin-right: 20px' v-decorator="['floor',{rules:[{required:true,message:'请选择楼层'}]}]" @change='setFloorId'>
              <a-select-option v-for='item in floorList' :label='item.floorName' :value='item.id' :key='item.id'>
                <span style="float: left">{{item.floorName}}</span>
              </a-select-option>
            </a-select>
            <a-button type='primary' @click="objectAdd(3)" icon="plus">新增</a-button>
          </a-form-item>

          <a-form-item label='房间号' :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input style='width: 180px;margin-right: 20px' placeholder='请输入添加房间号' v-model='houseName'></a-input>
            <a-button type='primary' @click="objectAdd(4)" icon="plus">批量新增</a-button>
          </a-form-item>
        <add-modal-form ref='addModalForm' @ok='modalFormOk' @addHouseOk='houseOk'></add-modal-form>
        </a-form>
    </a-spin>
  </a-modal>
</template>
<script>

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { duplicateCheck, getProjectList } from '@api/api'
import {getAction,postAction} from '@api/manage'
import AddModalForm from '@views/passage/project/modules/AddModalForm'


export default {
  name: 'BuildModalForm',
  mixins:[JeecgListMixin],
  components: {
      AddModalForm
  },
  data(){
    return{
      projectId:"",
      areaId:"",
      buildingId:"",
      unitId:"",
      floorId:"",
      confirmLoading: false,
      title:"新增",
      form: this.$form.createForm(this),
      visible:false,
      drawerWidth: 700,
      projectList:[],
      areaList:[],
      buildList:[],
      unitList:[],
      floorList:[],
      projectName:"",
      nodeBuilding:{},
      nodeUnit:{},
      nodeArea:{},
      areaName:"",
      buildName:"",
      unitName:"",
      floorName:"",
      houseName:"",
      locateName:"",
      model:{},
      disableSubmit:false,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      validatorRules:{
        name: {
          rules: [{
            required: true, message: '请输入房间号!'
          }, {
            validator: this.validateProjectname,
          }]
        },
      },
      url:{
        getAreaInfos:'/area/getAreaList',
        getbuildInfos:'/building/getBuildList',
        getUnitInfos:'/unit/getUnitList',
        getFloorInfos:'floor/getFloorList',
        addHouse:'house/addHouse'
      }
    }
  },
  created() {
    this.initProjectList()
  },
  methods:{
    addHouseOk(){
      this.$emit('ok')
      this.close()
    },
    validateProjectname(rule, value, callback) {
      var params = {
        tableName: 't_house',
        fieldName: 'house_name',
        fieldVal: value,
        dataId: this.id
      };
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback("房间号已存在!")
        }
      })
    },
    objectAdd(num){
          let id = ""
          if (num==1){
            this.$refs.addModalForm.title="新增楼栋"
            id=this.areaId
          }else if(num==2){
            this.$refs.addModalForm.title="新增单元"
            id=this.buildingId
          }else if (num==3){
            this.$refs.addModalForm.title="新增楼层"
            id=this.unitId
          }else if (num==4){
            this.$refs.addModalForm.title="新增房屋"
            id=this.floorId
          }
          if (id!=""&&id!=null){
            if (num==4){
              this.$refs.addModalForm.setHouse(id,this.projectId,this.locateName)

            }else {
              this.$refs.addModalForm.setId(id,num)
            }
            this.$refs.addModalForm.disableSubmit = false;
          }else{
            this.$message.warn("请先选择上级")
          }

    },
    houseOk(){
      this.$message.success("批量新增成功")
      this.$emit('modalFormOk')
      this.close();
    },
    handleSubmit() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
            let formData = {}
            formData.floorId = that.floorId
            that.confirmLoading = false;
            formData.houseName = that.houseName
            formData.locateName =that.locateName
            formData.projectId = that.projectId
            that.floorId=""
            that.unitId=""
            that.areaId=""
            that.projectId=""
            that.buildingId=""
            postAction(this.url.addHouse,formData).then((res)=>{
              if(res.success){
                this.$message.success("添加成功")
              }else{

                this.$message.warn(res.message)
              }
            })
          this.$emit("ok")
            that.close();
          }else{
          this.$message.error("添加失败")
        }
      })
    },
    modalFormOk(){
      if (this.nodeArea.key!=null){
        this.initBuildList(this.nodeArea)
      }
      if (this.nodeBuilding.key!=null){
        this.initUnitList(this.nodeBuilding)
      }
      if (this.nodeUnit.key!=null){
        this.initFloorList(this.nodeUnit)
      }

    },
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth;
      } else {
        this.modalWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },
    handleCancel() {
      this.close()
    },
    close () {
      this.projectId=""
      this.areaId=""
      this.buildingId=""
      this.unitId=""
      this.floorId=""
      this.$emit('close')
      this.form.resetFields()
      this.disableSubmit = false
      this.visible = false;
    },
    initProjectList() {
      this.projectId=""
      this.areaId=""
      this.buildingId=""
      this.unitId=""
      this.floorId=""
      this.form.resetFields()
      getProjectList().then((res)=>{
          this.form.resetFields(['areaName','buildName','unitName','floor'])
              if(res.success){
                  this.projectList = res.result
              }
          })
      },

    initAreaList(e) {
      let params = {
        projectId:e.key
      }
      this.projectId = e.key
      this.projectName = e.label[0].children[0].text
      this.areaId=""
      this.buildingId=""
      this.unitId=""
      this.floorId=""

      getAction(this.url.getAreaInfos,params).then((res)=>{
        if(res.success){
          this.areaList = res.result
        }
      })
    },
    initBuildList(e) {
      this.form.resetFields(['buildName','unitName','floor'])
      this.areaId = e.key
      let params = {
        areaId:e.key
      }
      this.nodeArea = e
      this.areaName = e.label[0].children[0].text
      this.buildingId=""
      this.unitId=""
      this.floorId=""
      getAction(this.url.getbuildInfos,params).then((res)=>{
        if(res.success){
          this.buildList = res.result
        }
      })
    },
    initUnitList(e) {
      this.form.resetFields(['unitName','floor'])
      this.buildingId = e.key
      let params = {
        buildingId:e.key
      }
      this.nodeBuilding = e
      this.buildName = e.label[0].children[0].text
      this.unitId=""
      this.floorId=""
      getAction(this.url.getUnitInfos,params).then((res)=>{
        if(res.success){
          this.unitList = res.result

        }
      })
    },
    initFloorList(e) {
      this.form.resetFields(['floor'])
      this.unitId = e.key
      let params = {
        unitId:e.key
      }
      this.nodeUnit = e
      this.unitName = e.label[0].children[0].text
      this.floorId=""
      getAction(this.url.getFloorInfos,params).then((res)=>{
        if(res.success){
          this.floorList = res.result
        }
      })
    },
    setFloorId(e){
      this.floorId=e.key
      this.floorName = e.label[0].children[0].text
      this.locateName = this.projectName+"-"+this.areaName+"-"+this.buildName+"-"+this.unitName+"-"+this.floorName

    }
  },
}
</script>
<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}

.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {

  border-top: 1px solid #e8e8e8;
  margin-left: 50px;
  padding: 10px 16px;
  text-align: left;
  left: 10px;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>